<template>
  <div :class="'app-home-'+theme">
    <Row class="top-card" :gutter="8">
      <Col span="4" v-for="(item,index) in topCardDatas" :key="index">
        <Card :style="'backgroundColor:'+item.bgc" class="bgImage">
          <p class="tit">{{item.name}}</p>
          <span class="con">
            <span class="num" :title="item.num">{{item.num | commaFormat}}</span>
            <span class="unit">{{item.unit}}</span>
          </span>
        </Card>
      </Col>
    </Row>

    <Card style="margin-bottom: 12px;" dis-hover>
      <Row :gutter="8">
        <Col :xs="24" :sm="24" :md="12" :lg="6" v-if="changeTab === 'card'">
          <Jdd-Input v-model="app" placeholder="应用名" @on-search="getAppData" search />
        </Col>
        <Col
          :xs="24"
          :sm="24"
          :md="6"
          :lg="6"
          v-if="changeTab === 'card'"
          style="display: flex;align-items:center;justify-content:center;"
        >
          <span style="margin-right:4px;">排序</span>
          <Jdd-Select v-model="type" :option="sortTypeList" @on-change='handleChangeSort' label-name="text" value-name="code"></Jdd-Select>
        </Col>
        <Col :xs="24" :sm="24" :md="6" :lg="6" v-if="changeTab === 'card'">
          <Jdd-BtnDefault type="primary" @click="toCreateApp">
            添加应用
            <!-- <Icon type="md-add"></Icon>添加应用 -->
          </Jdd-BtnDefault>
        </Col>
        <Col
          :xs="24"
          :sm="24"
          :md="changeTab === 'card'?12:24"
          :lg="changeTab === 'card'?6:24"
          style="text-align:right;"
        >
          <ButtonGroup size="small">
            <Jdd-BtnDefault
              :type="changeTab === 'card' ? 'primary' : 'default'"
              @click="cardOrTable('card')"
            >
              <Jdd-Icon type="icon-toWater" size="18" />
            </Jdd-BtnDefault>
            <Jdd-BtnDefault
              :type="changeTab === 'table' ? 'primary' : 'default'"
              @click="cardOrTable('table')"
            >
              <Jdd-Icon type="icon-toTables" size="18" />
            </Jdd-BtnDefault>
          </ButtonGroup>
        </Col>
      </Row>
    </Card>
    <appTable v-if="changeTab === 'table'"></appTable>

    <Scroll
      v-if="changeTab === 'card'"
      style="overflow-x: hidden;"
      class="scroll-cards"
      :height="scrollHeight"
      :distance-to-edge="10"
    >
      <Spin v-if="cardLoading" size="large" style="display: flex;justify-content: center"></Spin>
      <Row v-if="!cardLoading" :gutter="8">
        <Col span="6" v-for="(item,index) in cardData" :key="index">
          <Card dis-hover class="app-card">
            <Row class="header">
              <Col span="20">
                <!-- <i class="font_family icon-basics"></i> -->
                <Jdd-Icon type="icon-basics" />
                <a @click="backToHome(item.appName)">{{item.appName}}</a>
              </Col>
              <Col span="4" class="align-right">
                <a @click="toUpdate(item.id)" :title="$t('commons.edit')">
                  <!-- <i class="font_family icon-edit"></i> -->
                  <Jdd-Icon type="icon-edit" />
                </a>
              </Col>
            </Row>
            <Row class="body">
              <Col span="10">
                <Row class="left">
                  <Jdd-Icon class="top-left" type="ios-arrow-back" :size='32'/>
                  <Jdd-Icon class="top-right" type="ios-arrow-back" :size='32'/>
                  <Jdd-Icon class="bottom-left" type="ios-arrow-back" :size='32'/>
                  <Jdd-Icon class="bottom-right" type="ios-arrow-back" :size='32'/>
                  <Row class="bottom-border">
                    <div class="text">页面调用量</div>
                    <div class="num">{{item.pageTotal | commaFormat}}</div>
                  </Row>
                  <Row>
                    <div class="text">页面耗时</div>
                    <div class="num">{{item.pageCostAvg | commaFormat}} ms</div>
                  </Row>
                </Row>
              </Col>
              <Col span="14">
                <Row class="right">
                  <Row class="r r1">
                    <Col span="4">
                      <i class="font_family icon-garbageCollection"></i>
                    </Col>
                    <Col span="11" class="text">API调用量：</Col>
                    <Col span="9" class="num" :title="item.apiTotal">{{item.apiTotal | commaFormat}}</Col>
                  </Row>
                  <Row class="r r2">
                    <Col span="4">
                      <i class="font_family icon-garbageCollection"></i>
                    </Col>
                    <Col span="11" class="text">API耗时：</Col>
                    <Col
                      span="9"
                      class="num"
                      :title="item.apiCostAvg+'ms'"
                    >{{item.apiCostAvg | commaFormat}} ms</Col>
                  </Row>
                  <Row class="r r3">
                    <Col span="4">
                      <i class="font_family icon-garbageCollection"></i>
                    </Col>
                    <Col span="11" class="text">JS错误数：</Col>
                    <Col
                      span="9"
                      class="num"
                      :title="item.jsErrorTotal"
                    >{{item.jsErrorTotal | commaFormat}}</Col>
                  </Row>
                </Row>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </Scroll>
  </div>
</template>

<script>
import appTable from './components/list.vue'
import { appCardList } from '../scripts/api'
export default {
  name: 'sgmHome',
  components: { appTable },
  data () {
    return {
      changeTab: 'card',
      cardLoading: true,
      app: '',
      type: 'pageTotal',
      scrollHeight: 300,
      sortTypeList: [
        {
          code: 'pageTotal',
          text: '页面调用量'
        },
        {
          code: 'pageCostAvg',
          text: '页面耗时'
        }
      ],
      topCardDatas: [
        {
          name: '应用个数',
          num: 224,
          unit: '',
          icon: 'concrete',
          bgc: '#12A9B5'
        },
        {
          name: '页面调用量',
          num: 59427140,
          unit: '次',
          icon: 'concrete',
          bgc: '#2D8CF0'
        },
        {
          name: '页面耗时',
          num: 1814.49,
          unit: 'ms',
          icon: 'concrete',
          bgc: '#9361F9'
        },
        {
          name: 'API调用量',
          num: 781926805,
          unit: '次',
          icon: 'concrete',
          bgc: '#E070DD'
        },
        {
          name: 'API耗时',
          num: 198.92,
          unit: 'ms',
          icon: 'concrete',
          bgc: '#EF6F6F'
        },
        {
          name: 'JS错误数',
          num: 12769710,
          unit: '',
          icon: 'concrete',
          bgc: '#F1A85B'
        }
      ],
      cardData: []
    }
  },
  created () {
    const wh = window.innerHeight
    this.scrollHeight = wh - 212
    appCardList({ length: 100 }).then(response => {
      this.cardLoading = false
      this.cardData = (response.data || {}).data || []
    })
  },
  computed: {
    theme () {
      return this.$store.state.theme
    }
  },
  methods: {
    getAppData () {},
    toCreateApp () {},
    // 卡片和列表的切换按钮
    cardOrTable (t) {
      this.changeTab = t
    },
    handleChangeSort () {
      this.$Message.success(this.type)
    }
  }
}
</script>
<style scoped type="text/less" lang="less">
.top-card {
  margin-bottom: 10px;
  color: #fff;
  .con {
    position: relative;
    top: 6px;
    .unit {
      position: absolute;
      top: -11px;
      right: -17px;
    }
  }
  .num {
    display: inline-block;
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85%;
  }

  .bgImage {
    background: url("../../../resource/images/logo.png") no-repeat 95% 50%;
  }
}

.app-card {
  margin-bottom: 8px;
  .header {
    font-size: 14px;
    color: #c2c2c2;
    height: 34px;
    .font_family:first-child {
      margin-right: 8px;
      font-size: 13px;
    }
    .align-right {
      text-align: right;
    }
  }
  .body {
    .left {
      position: relative;
      background: rgba(147, 97, 249, 0.2);
      text-align: center;
      line-height: 20px;
      padding: 8px;
      border: 2px solid rgba(147, 97, 249, 0.2);
      .text {
        font-size: 12px;
        color: #c2c2c2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .num {
        font-size: 14px;
        color: #ffffff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .bottom-border {
        border-bottom: 1px solid rgba(147, 97, 249, 0.5);
        padding-bottom: 6px;
        margin-bottom: 6px;
      }
    }
    .top-left {
      position: absolute;
      top: -13px;
      left: -13px;
      font-size: 32px;
      transform: rotate(45deg);
      color: rgba(147, 97, 249, 1);
    }
    .top-right {
      position: absolute;
      top: -13px;
      right: -13px;
      font-size: 32px;
      transform: rotate(135deg);
      color: rgba(147, 97, 249, 1);
    }
    .bottom-left {
      position: absolute;
      bottom: -13px;
      left: -13px;
      font-size: 32px;
      transform: rotate(-45deg);
      color: rgba(147, 97, 249, 1);
    }
    .bottom-right {
      position: absolute;
      bottom: -13px;
      right: -13px;
      font-size: 32px;
      transform: rotate(-135deg);
      color: rgba(147, 97, 249, 1);
    }
    .right {
      padding-left: 10px;
      .r {
        .font_family {
          color: #fff;
          border-radius: 2px;
          text-align: center;
          font-size: 12px;
          padding: 3px;
          margin-right: 8px;
        }
      }
      .r1 {
        .font_family {
          background: rgba(45, 140, 240, 1);
        }
      }
      .r2 {
        padding: 25px 0;
        .font_family {
          background: #12a9b5;
        }
      }
      .r3 {
        .font_family {
          background: #ef6f6f;
        }
      }
      .text {
        position: relative;
        top: 2px;
        font-size: 12px;
        color: #c2c2c2;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .num {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.app-home-white {
  .app-card {
    .header {
      color: #515a6e;
    }
    .body {
      .left {
        background: rgba(147, 97, 249, 0.2);
        border: 2px solid rgba(147, 97, 249, 0.2);
        .text {
          color: #515a6e;
        }
        .num {
          color: #515a6e;
        }
        .bottom-border {
          border-bottom: 1px solid rgba(147, 97, 249, 0.5);
        }
      }
      .right {
        .text {
          font-size: 12px;
          color: #515a6e;
        }
      }
    }
  }
}
</style>
<style>
.mid-search .ivu-card-body {
  padding: 10px;
}
.scroll-cards .ivu-scroll-container {
  overflow-x: hidden;
}
.scroll-cards .ivu-scroll-loader-wrapper {
  padding: 0;
}
</style>
